<template>
  <div class="container">
    <search></search>
    <div class="work">
      <div class="work-header">
        <!--<div class="work-header-left">
          <div class="work-header-left-box">
            <div class="work-header-left-top">
              <img src="../../assets/img/playgroup/icon-coffee.png" alt="">
              <span>一日之计在于晨，一年之计在于春，一生之计在于勤</span>
            </div>
            <div class="work-header-left-date">
              <img src="../../assets/img/playgroup/icon-date.png" alt="">
              <span>{{ date }}</span>
            </div>
          </div>
        </div>-->
        <div class="work-header-right">
          <div class="work-header-item">
            <div class="work-header-item-icon">
              <img src="../../assets/img/playgroup/playgroup-icon-1.png" alt="">
            </div>
            <div class="work-header-item-content">
              <div class="work-header-item-name">办件数</div>
              <div class="work-header-item-value">445237</div>
            </div>
          </div>
          <div class="work-header-item">
            <div class="work-header-item-icon">
              <img src="../../assets/img/playgroup/playgroup-icon-2.png" alt="">
            </div>
            <div class="work-header-item-content">
              <div class="work-header-item-name">好评率</div>
              <div class="work-header-item-value">98%</div>
            </div>
          </div>
          <!--<div class="work-header-item">
            <div class="work-header-item-icon">
              <img src="../../assets/img/playgroup/playgroup-icon-3.png" alt="">
            </div>
            <div class="work-header-item-content">
              <div class="work-header-item-name">按期整改率</div>
              <div class="work-header-item-value">100%</div>
            </div>
          </div>-->
        </div>
      </div>
      <services></services>
      <div class="work-group service-guide">
        <div class="center-title">
          <img src="../../assets/img/nlzx-title-bg.png" alt="">
          <span>办事指南</span>
          <img src="../../assets/img/nlzx-title-bg.png" alt="">
        </div>
        <div class="center-sub-title">Service Guide</div>
        <div class="content-box">
          <div class="card-item">
            <div class="card-item-header">
              <img src="../../assets/img/playgroup/icon-location.png" alt="">
              <span>线下办理</span>
            </div>
            <div class="card-item-body-item">
              <img src="../../assets/img/playgroup/icon-location-2.png" alt="">
              <span>具体地址：浙江省东阳市横店影视产业实验区</span>
            </div>
            <div class="card-item-body-item">
              <img src="../../assets/img/playgroup/icon-time.png" alt="">
              <span>办理时间：工作日8：30-11：30，13：30-17：30</span>
            </div>
            <div class="card-item-body-item">
              <img src="../../assets/img/playgroup/icon-phone.png" alt="">
              <span>联系电话：0579-89322178、89322179、89322182</span>
            </div>
          </div>
          <div class="card-item">
            <div class="card-item-content">
              <div class="card-item-content-left">
                <div class="card-item-header">
                  <img src="../../assets/img/playgroup/icon-location.png" alt="">
                  <span>线上办理</span>
                </div>
                <div class="card-item-body-item">
                  <img src="../../assets/img/playgroup/icon-link.png" alt="">
                  <span>统一入口：浙里办 > 东阳市 > 横影通</span>
                </div>
              </div>
              <div class="card-item-content-right">
                <div class="card-item-qr">
                  <img src="../../assets/img/playgroup/icon-qr.png" alt="">
                  <div class="card-item-qr-text">扫码进入</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script lang="ts">
import Search from "@/components/Search.vue";
import moment from 'moment'
import {defineComponent, ref} from "vue";
import Services from "@/views/Personal/Services.vue";

export default defineComponent({
  components: {Services, Search,},
  setup() {
    const date = ref<string>('')
    date.value = moment(new Date()).format('YYYY年MM月DD日 dddd')
    const list = [
      {
        name: '开发中',
        icon: require('@/assets/img/enterprise/enterprise-icon-10.png')
      },
    ]
    return {
      date,
      list
    };
  },
});
</script>

<style scoped lang="less">
.container {

  .work {
    background: url("../../assets/img/nlzx-bg.png");

    .work-header {
      display: flex; justify-content: center; background: white;
      border-bottom: 1px solid #DBDBDB;

      .work-header-left {
        position: relative;
        width: 45%;
        height: 152px;
        //padding-left: 212px;
        background: #F6F6F6;
        text-align: right;

        .work-header-left-box {
          position: relative;
          display: inline-block;
          right: 30px;
          width: 550px;
          height: 100%;
          text-align: center;

          .work-header-left-top {
            font-size: 18px;
            color: #8B8B8B;
            line-height: 78px;
            border-bottom: 1px solid #D9D9D9;

            img {
              vertical-align: middle;
              margin-right: 20px;
            }

            span {
              vertical-align: middle;
            }
          }

          .work-header-left-date {
            font-size: 20px;
            color: #313233;
            line-height: 74px;

            img {
              vertical-align: middle;
              margin-right: 20px;
            }

            span {
              vertical-align: middle;
            }
          }
        }
      }

      .work-header-right {
        display: flex; align-items: center; justify-content: center;
        width: 55%;
        background: #FFFFFF;

        .work-header-item {
          display: flex;
          /*width: 33.33%;*/
          margin-right: 80px;
          padding: 34px 0;

          .work-header-item-icon {
            margin-left: 80px;
            margin-right: 10px;
          }

          .work-header-item-content {
            padding: 10px 0;

            .work-header-item-name {
              font-size: 18px;
              color: #313233;
              line-height: 30px;
              letter-spacing: 1px;
            }

            .work-header-item-value {
              font-size: 24px;
              color: #CB914D;
              line-height: 36px;
              letter-spacing: 1px;
            }
          }
        }
      }
    }

    .work-group {
      &.service-guide {
        /*background: #FFFFFF;*/
        background: linear-gradient(180deg, #F6F6F6 0%, #F1F1F1 100%);

        .content-box {
          display: flex;
          padding: 40px 0;

          .card-item {
            width: 50%;
            height: 242px;
            padding: 30px 45px;
            border: 1px solid #DBDBDB;

            .card-item-header {
              margin-bottom: 20px;
              font-size: 20px;
              font-weight: 700;
              color: #313233;
              line-height: 28px;

              img {
                vertical-align: middle;
                margin-right: 10px;
              }

              span {
                vertical-align: middle;
              }
            }

            &:nth-of-type(2n+1) {
              background: url('../../assets/img/playgroup/playgroup-bg-1.png') no-repeat center / 100%;
            }

            &:nth-of-type(2n+2) {
              background: url('../../assets/img/playgroup/playgroup-bg-2.png') no-repeat center / 100%;
            }

            .card-item-content {
              display: flex;

              .card-item-content-left {
                flex: 1;
              }
              .card-item-content-right {
                width: 140px;

                .card-item-qr {
                  .card-item-qr-text {
                    margin-top: 15px;
                    text-align: center;
                    font-size: 16px;
                    color: #313233;
                    line-height: 28px;
                  }
                }
              }
            }

            .card-item-body-item {
              font-size: 16px;
              font-weight: 400;
              color: #313233;
              line-height: 36px;

              img {
                vertical-align: middle;
                margin-right: 10px;
              }

              span {
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
  }

}

</style>
